<template>
    <input type="text" v-model="keyWord">
    <h3>{{keyWord}}</h3>
</template>

<script>
import {ref,customRef} from "vue"
    
export default {
    name:"App",

    setup(){
        //自定义一个Ref
        function myRef(value){
            let timer;

            return customRef((track,trigger)=>{
                return {
                    get(){
                        console.log(`有人从myRef容器中的数据读取了${value}`);
                        track();//通知vue追踪数据value的变化（提前和get商量一下，让他认为value是有用的）
                        return value;
                    },
                    set(newValue){
                        console.log(`有人把myRef容器中的数据改为了${newValue}`);
                        //此时关闭定时器，可以防抖
                        clearTimeout(timer);
                        timer = setTimeout(() => {
                            value = newValue;
                            trigger();//通知vue重新解析模板
                        }, 1000);
                    },
                }
            });
        }

        // let keyWord = ref("hello");//使用vue提供的内置ref
        let keyWord = myRef("hello");//使用程序员自定义的ref

        return{
            keyWord,
            myRef,
        }
    }
}
</script>


